<template>
  <view>
    <view class="content relative">
      <view class="list_box" style="margin-top: 0;">
        <view class="zhuanchu_box">
          <view class="choose_box u-f-ac u-f-jsb" @click="showSelect1=true">
            <view>{{items1.label || '选择颜色'}}</view>
            <view><u-icon name="arrow-down-fill" color="#E91536"></u-icon></view>
          </view>
          <view class="choose_box u-f-ac u-f-jsb" @click="showSelect2=true">
            <view>{{items2.label}}</view>
            <view><u-icon name="arrow-down-fill" color="#E91536"></u-icon></view>
          </view>
          <view class="choose_box u-f-ac u-f-jsb" @click="showSelect3=true">
            <view>{{items3.label}}</view>
            <view><u-icon name="arrow-down-fill" color="#E91536"></u-icon></view>
          </view>
          <view class="button_box u-f-ajc relative" @click="putCrazyBuy">
            <view class="absolute absolute_box u-f-ac">
              <view style="font-size: 50rpx;" @click.stop="jian('-')">-</view>
              <view><u-input v-model="num" placeholder=" " type="number" input-align="center"
                  :clearable="false"></u-input></view>
              <view @click.stop="jian('+')">+</view>
            </view>
            <text>兑换</text>
          </view>
        </view>
      </view>

      <view class="shadow"></view>
      <view class="list_box">
        <view class="list relative">
          <view class="absolute abso_box u-f-ajc">兑换纪录</view>
          <view class="item title_box u-f-ac u-f-jsb">
            <view class="time u-f-ajc" style="width: 50%">时间</view>
            <view class="u-f-ajc" style="width: 50%">颜色</view>
            <!-- <view style="width: 25%;text-align: right;">扣除券额</view> -->
          </view>
          <view class="item u-f-ac u-f-jsb" v-for="(item, index) in list" :key="index">
            <view class="time u-f-ajc" style="width: 50%">{{item.create_time | date('mm-dd hh:MM:ss')}}</view>
            <view class="u-f-ajc" style="width: 50%;">
              <image :src="item.image" mode="widthFix"></image>
              <view>{{item.name}}</view>
            </view>
            <!-- <view class="u-f-ajc" style="width: 20%">000</view> -->
          </view>
        </view>
      </view>

    </view>

    <u-select v-model="showSelect1" value-name="id" label-name="name" :list="eggList"
      @confirm="(e) => confirm(e, 'items1')"></u-select>
    <u-select v-model="showSelect2" :list="list2" @confirm="(e) => confirm(e, 'items2')"></u-select>
    <u-select v-model="showSelect3" :list="list3" @confirm="(e) => confirm(e, 'items3')"></u-select>

    <number-jpan :length="6" @closeChange="closeChange($event)" @close="closejpan" ref="numberPad"></number-jpan>

  </view>
</template>

<script>
  import md5Libs from "uview-ui/libs/function/md5";

  import * as API_Mall from '@/api/malls.js';

  import numberJpan from "@/components/numberJpan/numberJpan.vue";

  export default {
    components: {
      numberJpan
    },
    data() {
      return {
        eggList: [],
        list: [],
        params: {
          pageNo: 1,
          pageSize: 10,
          eggId: '',
          buyOrPool: true,
        },

        showSelect1: false,
        items1: {},

        showSelect2: false,
        list2: [{
            label: '百汇券',
            value: true
          },
          {
            label: '汇购券',
            value: false
          },
        ],
        items2: {
          label: '百汇券',
          value: true
        },

        showSelect3: false,
        list3: [{
            label: '汇购券',
            value: true
          },
          {
            label: '颜色积分',
            value: false
          },
        ],
        items3: {
          label: '汇购券',
          value: true
        },
        num: '1',

      }
    },
    onLoad() {
      this.getCrazyMyEggs()
    },
    methods: {
      jian(type) {
        if (type == '-') {
          if (Number(this.num) <= 1) return
          this.num = Number(this.num) - 1
        }
        if (type == '+') {
          this.num = Number(this.num) + 1
        }
      },
      confirm(e, name) {
        this[name] = e[0]
      },
      async closeChange(res1) {
        this.closejpan()
        await API_Mall.putCrazyBuy({
          pwd: md5Libs.md5(res1),
          eggId: this.items1.value,
          isDelivery: this.items2.value,
          isGrabbing: this.items3.value,
          amt: this.num,
        })
        this.$u.toast('购买成功！')
        this.getCrazyMyEggs()
        // uni.showModal({
        //   title: '温馨提示',
        //   content: `确定要使用${this.items2.label}+${this.items3.label}购买${this.items1.label}吗？`,
        //   confirmText: '确定购买',
        //   confirmColor: 'rgb(242, 20, 20)',
        //   cancelText: '取消',
        //   success: async (res) => {
        //     if (res.confirm) {
        //       await API_Mall.putCrazyBuy({
        //         pwd: md5Libs.md5(res1),
        //         eggId: this.items1.value,
        //         isDelivery: this.items2.value,
        //         isGrabbing: this.items3.value,
        //       })
        //       this.$u.toast('购买成功！')
        //       this.getCrazyMyEggs()
        //     }
        //   }
        // })
      },
      closejpan() {
        this.$refs.numberPad.close() //关闭数字输入框
      },
      putCrazyBuy() {
        if (!this.items1.label) return this.$u.toast('请选择要购买的彩蛋！')
        if (Number(this.num) < 1) return this.$u.toast('最少购买数量为1！')

        this.$refs.numberPad.open()
      },
      async getCrazyEgg() {
        let res = await API_Mall.getCrazyEgg()
        this.eggList = res
      },
      async getCrazyMyEggs() {
        await this.getCrazyEgg()
        let res = await API_Mall.getCrazyMyEggs(this.params)

        let arr = []
        for (let i of res.data) {
          let obj = {
            name: '',
            image: '',
            egg_id: i.egg_id,
            create_time: i.create_time,
          }
          obj.name = this.eggList.find(item => item.id == i.egg_id).name
          obj.image = this.eggList.find(item => item.id == i.egg_id).thumbnail
          arr.push(obj)
        }
        this.list = arr
        console.log(this.list)
      },


    },
  }
</script>

<style lang="scss">
  page {
    background-color: #E91536;
  }

  .content {
    padding: 60rpx 30rpx 200rpx;

    .shadow {
      width: 100%;
      height: 120rpx;
      background: #C6112D;
      border-radius: 30rpx;
    }

    .list_box {
      margin-top: -90rpx;
      width: 100%;
      padding: 0 10rpx;
    }

  }

  .list {
    width: 100%;
    background: #FFFCF0;
    border: 1px solid #FF6264;
    box-shadow: 0px 0px 10rpx 2rpx #FFE478;
    border-radius: 30rpx;
    padding: 40rpx 20rpx;

    .abso_box {
      width: 250rpx;
      height: 66rpx;
      background: url(/static/images/caidan/jifenjilu.png) no-repeat 0 0;
      background-size: 100% 66rpx;
      color: #E91536;
      font-weight: 700;
      top: -46rpx;
      left: 50%;
      margin-left: -125rpx;
    }

    .item {
      color: #8A3D06;
      padding: 16rpx 20rpx;
      border-bottom: 1px dashed #ccc;

      >view {
        width: 33.3%;
      }

      >view:nth-of-type(2) {
        width: 20%;
      }

      image {
        width: 30rpx;
        margin-right: 20rpx;
      }
    }

    .title_box {
      background-color: #FFEBC2;
      // background-color: red;
      border-radius: 50rpx;
      padding: 8rpx 20rpx;
      font-weight: 700;
      border-bottom: none;
      margin-bottom: 10rpx;
    }
  }

  .zhuanchu_box {
    width: 100%;
    background: #FD563F;
    border: 1px solid rgba(255, 252, 240, 0.61);
    border-radius: 30rpx;
    padding: 40rpx 20rpx;
    margin-bottom: 60rpx;
    color: #E91536;

    .choose_box {
      padding: 16rpx 20rpx;
      background-color: #fff;
      border-radius: 16rpx;
      font-size: 26rpx;
      margin-bottom: 26rpx;
    }

    .button_box {
      width: 100%;
      height: 74rpx;
      background: linear-gradient(180deg, #FFFCF0, #F9D792);
      border-radius: 30rpx;
      font-weight: 700;

      .absolute_box {
        right: 50rpx;

        view {
          color: #000;
          font-size: 40rpx;
        }

        >view:nth-of-type(2) {
          width: 50rpx;
          margin: 0 10rpx;
        }
      }
    }
  }
</style>